<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script th:src="@{/js/jquery.js}"></script>
<script>
    //邮箱非空验证
    function emailRe(){
        var email=$("input[name=email]");
        if(email.val()!=null&&email.val()!=''){
            email.next("span").html("");
            return true;
        }else {
            email.next("span").html("邮箱不能为空");
            return  false;
        }
    }
    //验证码验证
    function verifyRe() {
        var yn=false;
        var verify=$("input[name=verify]");
        if(verify.val()!=null&&verify.val()!=''){
            if(verifyCode==-1){
                verify.next("input").next("span").html("请先获取验证码");
            }else{
                if(verifyCode!=verify.val()){
                    verify.next("input").next("span").html("验证码输入错误");
                }else{
                    yn=true;
                    verify.next("input").next("span").html("");
                }
            }
        }else{
            verify.next("input").next("span").html("请先输入验证码");
        }
        return yn;
    }
    //Email登入提交事件
    function loginEmailSubmit() {
        alert("emailLogin");
        if(verifyRe()&&emailRe()){
            return true;
        }else{
            return false;
        }
    }

    //验证码
    var verifyCode=-1;
    function showHide() {
        $("#userLogin").toggle();
        $("#emailLogin").toggle();
    }

    $(function () {
        //如果邮箱有错误信息那就给邮箱登入显示
        if($("#emailLogin div").text()!="" && $("#emailLogin div").text()!=null){
            showHide();
        }
        //邮箱非空验证
        $("input[name=email]").blur(emailRe);
        //邮箱登入
        $("#emailLogin").submit(loginEmailSubmit);
        //点击获取验证码
        $("#verificationCode").click(function () {
            alert("verificationCode");
            var email=$("input[name=email]");
            if(email.val()!=null&&email.val()!=''){
                $.getJSON("/user/verificationCode","email="+email.val(),function (data) {
                    /*alert(data);*/
                    //赋值验证码
                    verifyCode=data;
                });
            }else{
                emailRe();
            }
        });
/////////////////////////////////////////
        /*$("")*/


/////////////////////////////////////////
        //回车  制表符事件    当我在后台没登入成功后这玩意已经不管用
        $(window).keydown(function (event) {
            if(event.keyCode==9){
                showHide();
            }else if(event.keyCode==13){
                $("form:visible").submit();
            }
        });

/////////////////////////////////////////
    });

</script>
<body>
<!--<script th:inline="javascript">
    if([[${emailLoginError}]]=='邮箱不存在或者未激活'){
        showHide();
    }
</script>-->
    <h3>用户登入</h3>

    <form id="userLogin" method="post" action="/user/userLogin">
        <div th:text="${userLoginError}"></div><!--[[${userLoginError}]]-->
        用户名：<input type="text" name="name" required><br/>
        密码：<input type="password" name="pwd" required><br/>
        <input type="submit" value="用户登入"/>
    </form>
    <form method="post" action="/user/emailLogin" id="emailLogin" style="display: none">
        <div th:text="${emailLoginError}"></div>
        邮箱：<input type="email" name="email"><span></span><br/>
        验证码：<input type="text" name="verify"><input type="button" id="verificationCode" value="获取验证码"><span></span><br/>
        <input type="submit" value="邮箱登入"/>
    </form>
<!--/////////////////////////////////////////////////////////-->
<!--    <button id="forgetPwd"></button>-->
    <a href="/user/forgetPwd">忘记密码</a>


<a href="/register">点击进入注册页面</a>

<div id="live2d-widget">
    <canvas id="live2dcanvas" width="300" height="600" style="position: fixed;opacity: 0.7;right: 0px;bottom: -20px;z-index: 99999;pointer-events: none;border: 1px dashed rgb(204, 204, 204);"></canvas>
</div>
<script type="text/javascript" charset="utf-8" async="" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.0.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js?_=1557308476616"></script>
<script type="text/javascript">
    L2Dwidget.init();
</script>

</body>
</html>